@import '../../../asset/scss/mixin/export.scss';

// 20+50+14+20+10+22*4+20+12+10

.latest{
    background: #fff;
    padding: $pt20 0 $pt15 0;
    .status{
        text-align: center;
        font-size: $fontNn;
        line-height: $pt14;
        margin-bottom: $pt20;
    }
    .main{
        @include flex;
        @include justify(center,center);
        div{
            width: 3rem;
            padding-top: $pt10;
        }
        .left{
            border-right: 1px solid #ccc;
            img{
                width: 90%;
            }
        }
        .center{
            text-indent:$pt12;
            .money{
                margin-bottom: $pt6;
                color: $energized;
                span{
                    font-size: $fontBb;
                }
                span.new_color{
                    font-size: $fontNb;
                    color: $positiveD;
                }
            }
            .new_money{
                color: $positiveD;
            }
            .text{
                @include font_ss_gll;
            }
        }
        .right{
            width: 3.6rem;
            p{
                margin-bottom: $pt10;
                @include font_ss_gn;
                height: $pt12;
                line-height: $pt12;
            }
            p.info{
                span{
                    padding-left: .3rem;
                }
                span.money{
                    color: $energized;
                }
                span.date{
                    color: $grayLl;
                }
            }
            p.privilege{
                span{
                    position: relative;
                    color: $grayLl;
                    vertical-align: middle;
                    img{
                        width:10px;
                        vertical-align: middle;
                        margin-right:$pt4;
                    }
                }
                span:first-child{
                    margin-right: $pt20;
                }
                span.used{
                    color: $energized;
                }
            }
        }
    }
}

.list{
    position: absolute;
    height: 300px;
    //不设置top和bottom值，top值会自动根据上面的元素排列，通过js设置这个元素的的高度
    left: 0;
    right:0;
    .empty{
        @include empty;
    }
    .bill_nums{
        padding: 15px 0 0;
        height: 40px;
        margin:0;
        @include font_ns_gll;
        text-align:center;
    }
    .scroll{
        top: $pt50;
    }
    .bill{
        background: #fff;
        .breif{
            height: $pt50;
            padding: $pt8 $pt20 0;
            position: relative;
            .num{
                float: left;
                span{
                    display: block;
                }
                .money{
                    padding-left: 24px;
                    @include font_nb_gn;
                    position: relative;
                    margin-bottom: $pt5;
                    i{
                        @include icon(16px);
                        background-image: url('/static/img/money@3x.png');
                        left: 2px;
                        top: 2px;
                    }
                }
                .date{
                    @include font_ss_gl;
                    line-height: $pt10;
                }
            }
            .xieyi{
                position: absolute;
                top: 0.35rem;
                left: 50%;
                margin-left: -1rem;
                width: 2rem;
            }
            .status{
                float: right;
                padding-top: $pt12;
                padding-right: 25px;
                @include font_ns_gn;
                position: relative;
                i{
                    @include icon(20px);
                    background-image: url('/static/img/closed@3x.png');
                    right: 0;
                    top: $pt10;
                    &:after{
                        @include click_helper;
                    }
                }
            }
        }
        .detail{
            transform:translate3d(0,0,0);
            overflow: hidden;
            background: $energized;
            padding: 0 $pt20;
            height: 0;
            transition: all 0.3s;
            box-sizing: border-box;
            p{
                @include font_ss_gn;
                margin: 0;
                line-height: $fontSs;
                @include flex;
                @include justify(space-between,justify);
                span{
                    width: 1.6rem;
                }
                span:nth-child(2){
                    width: 1.2rem;
                }
                span:nth-child(4){
                    width: 1.8rem;
                }
                span:nth-child(5){
                    text-indent: 0.4rem;
                    color: $white;
                    position: relative;
                    opacity: 0.6;
                    i{
                        @include icon(10px);
                        background-image: url('/static/img/CIRCLE-DELETEgrey@3x.png');
                        left: 0;
                        top: -1px;
                    }
                }
                span:nth-child(5).used{
                    opacity: 1;
                    i{
                        background-image: url('/static/img/CIRCLE-OKwhite@3x.png');
                    }
                }
            }
            p{
                margin-top: $pt12;
            }
        }
    }
    .bill.open{
        .breif{
            .status{
                i{
                    background-image: url('/static/img/open@3x.png');
                }
            }
        }
        .divide{
            background: #fff!important;
        }
        .detail{
            height: $pt60;
            &.actualRepayed{
                height: $pt75;
            }
        }
    }
}